.el-menu {
  border-right: 0;
  height: calc(100% - 40px);
  .menu-item {
    padding: 4px 0;

    .el-menu-item:hover {
      background-color: var(--cc-menu-active-hover-back-color);
      color: var(--cc-main-color);
    }
    .el-menu-item {
      height: 40px;
      line-height: 40px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 16px;
      padding-left: 16px !important;
      .menu-item-title {
        padding-left: 8px;
      }
    }

    /* 多级菜单样式 */
    .el-sub-menu {
      line-height: 40px;
      .el-sub-menu__title {
        height: 100%;
        line-height: 40px;
        padding: 0 16px;
        padding-left: 16px !important;
        .menu-item-title {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding-right: 8px;
        }
      }
      .el-sub-menu__title:hover {
        background-color: var(--cc-menu-active-hover-back-color) !important;
        color: var(--cc-main-color) !important;
      }
    }
    .el-sub-menu__icon-arrow {
      font-weight: bold;
      transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s,
        transform var(--el-transition-duration);
    }

    /* 激活时的菜单样式 */
    .el-menu-item.is-active {
      border-right: 3px solid var(--cc-main-color);
      color: var(--cc-main-color);
      background-color: var(--cc-menu-active-back-color);
    }
    .el-sub-menu.is-active {
      .el-sub-menu__title {
        color: var(--cc-main-color) !important;
        // background-color: var(--cc-menu-active-back-color) !important;
      }
    }
    .el-sub-menu.is-active.is-opened {
      .el-sub-menu__title {
        // background-color: white !important;
      }
    }
    .el-menu-item.is-active {
      transition: border-right 0.1s linear;
    }
  }
}

